<template>
  <div>
    <div>
      <el-form :inline="true" :model="form">
        <el-button-group>
          <el-button type="primary" icon="edit" @click="editHandler"/>
          <el-select v-model="form.region" placeholder="机构或个人">
            <el-option label="个人" value="user"></el-option>
            <el-option label="机构" value="org"></el-option>
          </el-select>
          <el-form-item>
            <el-button type="primary" @click="_queryfundByType">搜索</el-button>
          </el-form-item>
        </el-button-group>
      </el-form>
    </div>

    <el-table :data="getSysrecommends" border :stripe="true" :highlight-current-row="true"
              style="width: 100%" @current-change="tableRowChangeClickHandler">
      <el-table-column prop="fundCode" label="基金代码" min-width="20%"/>
      <el-table-column prop="fundName" label="基金名称" min-width="20%"/>
      <el-table-column prop="minMoney" label="最低起购" min-width="20%"/>
      <el-table-column prop="reminder" label="提示语" min-width="20%"/>
      <el-table-column prop="state" label="是否推荐" min-width="20%" :formatter="formatterStateHandler"/>
    </el-table>

    <div style='margin-top: 20px'>
      <el-form :model="form" prop="fundName" label-width="120px" :rules="rules">
        <el-row>
          <el-form-item label="推荐基金" prop="fundCode_s">
            <el-select v-model="fundCode_s" placeholder="请选择">
              <el-option
                v-for="item in getSysrecommends"
                :label="item.fundName"
                :value="item.fundCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fundRecommend">设为推荐</el-button>
            <el-button type="primary" @click="fundRecommend_del">清空推荐</el-button>
          </el-form-item>
        </el-row>
        <el-row style='margin-top: 20px'>
          <el-col :span="11">
            <el-form-item label="最低起购" prop="minMoney">
              <el-input v-model="form.minMoney" placeholder="输入最低起购" :disabled="disableForm"
                        style='width: 100%'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="提示语" prop="reminder">
              <el-input v-model="form.reminder" placeholder="输入提示语" :disabled="disableForm"
                        style='width: 100%'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="saveHandler">确定</el-button>
          <el-button type="primary" @click="resetHandler">取消</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--<upload-form ref="uploadForm" :mode="formMode" :param="currentRecord"/>-->

    <!--<button v-clipboard="copyData" @success="copySucHandler" @error="copyErrorHandler"-->
    <!--ref="btnCopy" style="display:none">copy-->
    <!--</button>-->


  </div>
</template>

<script type="text/babel">
  import { mapActions } from 'vuex'

  import recommendStore from './bll/recommendStore'
  import store from '../../store'

  (!store.state.recommendStore) && store.registerModule('recommendStore', recommendStore)

  export default {
    data () {
      return {
        formMode: null,
        currentRecord: null,
        fundCode_s: '',
        form: {
          region: 'user',
          minMoney: '',
          reminder: '',
          fundCode: ''
        },
        rules: {
          minMoney: [
            {type: 'number', required: true, message: '输入最低起购', trigger: 'blur'}
          ],
          reminder: [
            {required: false, message: '请输入提示语', trigger: 'blur'}
          ]
        },
        disableForm: true
      }
    },
    computed: {
      getSysrecommends () {
        return this.$store.state.recommendStore.Recommends
      }
    },

    mounted () {
      console.log('file upload page mounted.')
      this.initPage()
    },

    methods: {
      ...mapActions(['queryRecommend', 'editRecommend', 'eidtFund']),

      initPage () {
        this.queryRecommend()
      },
      fundRecommend () {
        console.log(this.fundCode_s)
        this.$confirm('确定推荐, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var fundCode = this.fundCode_s
          this.editRecommend({fundCode}).then(() => {
            console.log('wancheng')
            this.$message({
              type: 'success',
              message: '推荐成功!'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消推荐'
          })
        })
      },
      fundRecommend_del () {
        this.$confirm('确定清空推荐, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var fundCode = '-1'
          this.editRecommend({fundCode}).then(() => {
            console.log('wancheng')
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      formatterStateHandler (row, column) {
        switch (column.property) {
          case 'state':
            switch (row.state) {
              case '1':
                return '推荐'
              case '0':
                return '不推荐'
            }
            break
        }
        return 'Unkown key'
      },
      tableRowChangeClickHandler (currentRow, oldCurrentRow) {
        console.log(currentRow)
        if (currentRow) {
          this.currentRecord = currentRow
          this.form.minMoney = currentRow.minMoney
          this.form.reminder = currentRow.reminder
          this.form.fundCode = currentRow.fundCode
        }
      },
      editHandler () {
        if (!this.currentRecord) {
          this.$message.warning('请选择一条记录')
          return
        }
        this.disableForm = false
      },
      saveHandler () {
        console.log(1)
        var formdata = this.form
        formdata.userOrOrg = this.form.region
        var self = this
        console.log(formdata)
        this.eidtFund({formData: formdata}).then((data) => {
          console.log(data)
          self.disableForm = true
          self.$alert('更新信息成功', '消息', {
            confirmButtonText: 'OK'
          })
          var fundtype = this.form.region
          this.queryRecommend({fundtype: fundtype})
        })
      },
      resetHandler () {
        this.disableForm = true
      },
      _queryfundByType () {
        var fundtype = this.form.region
        this.queryRecommend({fundtype: fundtype})
      }
    }
  }
</script>

<style lang="scss">
  .download-url {
    padding: 5px;
  }

  .qrcode-wrapper {
    margin: auto;
  }
</style>

